<template>
    <div id="replay-control">
        <div class="replay-control-label"><p v-text="cameraList.length == 0 ? '无摄像头连接' : '摄像头：'"></p></div>
        <div v-for="(item, index) in cameraList" :key="index" class="camera-list">
            <button :class="cameraIndex == index ? 'btn btn-selected' : 'btn'" name="camera" type="radio" :value="item" @click="cameraSelected(index)">
                <i class="el-icon-camera"></i>
                <span>{{item}}</span>
            </button>
        </div>
        <div class="replay-control-label"><p>日期：</p></div>
        <div class="replay-date">
            <el-date-picker 
                v-model="date" 
                :picker-options="pickerOptions" 
                format="yyyy年 M月 d日"
                value-format="yyyyMMdd"
                type="date" 
                placeholder="选择日期">
            </el-date-picker>
        </div>
        <div class="replay-control-label"><p>时间范围：</p></div>
        <div class="replay-time">
            <el-time-picker
                is-range
                v-model="timelimit"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
            </el-time-picker>
        </div>
        <div class="replay-btn">
            <el-button type="primary" icon="el-icon-search" 
            @click="replay" 
            :loading="loading">
            查询录像
            </el-button>
        </div>
        <!-- :disabled="cameraList.length == 0 ? true : false" -->
    </div>
</template>

<script>
export default {
    data(){
        return {
            loading: false,
            cameraList: [],
            cameraIndex: 0,
            date: '',
            timelimit: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
        }
    },
    methods: {
        getCameras() {
            this.$axios.get("/api/video/replay/cameras")
            .then((response) => {
                if (response.data.success == true) {
                    this.cameraList = response.data.o;
                }
            }).catch((error) => {
                this.requestError("ERROR：获取摄像头列表失败，请稍后重试！");
            })
        },
        replay() {
            this.loading = true;
            var cameraName = this.cameraList[this.cameraIndex];
            var searchDate = this.date;
            var startTime = '' + searchDate + this.getTime(this.timelimit[0]);
            var endTime = '' + searchDate + this.getTime(this.timelimit[1]);
            this.$axios
            .get("/api/video/replay?cameraName=" + cameraName + "&startTime=" + startTime+ "&endTime=" + endTime)
            .then((response) => {
                if(response.data.success == true) {     //查找成功
                    if(response.data.o != null) {       //找到录像
                        console.log("录像播放地址：" + response.data.o)
                        this.$emit("setVideoUrl", response.data.o);
                    } else {                            //未找到录像
                        this.$message({
                            message: response.data.message,
                            type: 'warning'
                        });
                    }
                } else {                                //查找失败
                    this.requestError(response.data.message);
                }
                this.loading = false;
            }).catch((error) => {
                console.log(error);
                this.loading = false;
                this.requestError("ERROR：请求异常，请稍后重试！");
            })
        },
        requestError(message) {
            this.$message.error(message);
        },
        isChinese(str){
            var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
            if(reg.test(str)) return true;
            return false;
        },
        cameraSelected(index) {
            this.cameraIndex = index;
        },
        getDate(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if(month < 10)
                month = '0' + month;
            if(day < 10)
                day = '0' + day;
            return '' + year + month + day;
        },
        getTime(date) {
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            if(hours < 10)
                hours = '0' + hours;
            if(minutes < 10)
                minutes = '0' + minutes;
            if(seconds < 10)
                seconds = '0' + seconds;
            return '' + hours + minutes + seconds;
        }
    },
    mounted() {
        this.getCameras();
        this.date = this.getDate(new Date());
        var beforeDate = new Date();
        beforeDate.setHours(beforeDate.getHours()-1);
        this.timelimit = [beforeDate, new Date()];
    }
}
</script>

<style scoped>
#replay-control {
    margin-left: 10px;
    margin-right: 5px;
}
.replay-control-label {
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
    color: white;
    font-weight: bold;
    text-align: left;
    font-size: 20px;
    letter-spacing: 5px;
}
.replay-control-label p {
    margin: 0;
}
.camera-list {
    text-align: left;
}
.camera-list button {
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px;
}
.btn{
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 1;
    -webkit-border-radius:6px;/*适配以webkit为核心的浏览器(chrome、safari等)*/
    -moz-border-radius:6px;/*适配firefox浏览器*/
    -ms-border-radius:6px;/*适配IE浏览器*/
    -o-border-radius:6px;/*适配opera浏览器*/
    border-radius:4px;/*适配所有浏览器*/
    border: 1px solid #C6C4C4;
    outline: none;
    margin-bottom: 5px;
}
.btn-selected {
    color: white;
    background-color: #409EFF;
    border-color: #409EFF;
}
button :focus{
    outline:0;
} 
.camera-list span {
    padding-left: 2px;
}
.camera-row {
    margin-bottom: 10px;
}
.el-radio-button {
    max-width: 125px;
    overflow: hidden;
    border-radius: 5px;
}
.replay-date {
    width: 100%;
    margin-bottom: 5px;
}
.replay-time {
    margin-bottom: 5px; 
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
}
.el-button {
    margin-top: 5px;
    width: 100%;
}
</style>